<template>
  <div>
    <div class="bg-white grid-content">
      <div style="overflow: hidden">
        <div class="mytitle">
          <svg-icon icon-class="yjbb" class="myIcon" />水 井 作 业 积 压
        </div>
        <div class="myButtons">
          <el-button @click="handleClick('', 'add')">新增</el-button>
          <el-button @click="uploadData">批量导入</el-button>
        </div>
      </div>

      <el-tabs v-model="activeName" type="card" @tab-click="handleMenuClick">
        <el-tab-pane label="水井作业情况表" name="first"
          >水井作业情况表</el-tab-pane
        >
        <el-tab-pane label="正在作业井" name="second">正在作业井</el-tab-pane>
        <el-tab-pane label="已出方案未实施" name="third"
          >已出方案未实施</el-tab-pane
        >
        <el-tab-pane label="未出方案未实施" name="fourth"
          >未出方案未实施</el-tab-pane
        >
      </el-tabs>

      <!--总览界面-->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
        v-show="zonglanVisable"
      >
        <el-table-column type="index" align="center" prop="dw" label="单位">
        </el-table-column>
        <el-table-column prop="id" align="center" label=" ">
          <el-table-column align="center" prop="tbrq" label="重配井">
            <el-table-column align="center" prop="zjs" label="井数">
            </el-table-column>
            <el-table-column align="center" prop="zrpz" label="日配注">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="aqscts" label="分层、细分井">
            <el-table-column align="center" prop="fjs" label="井数">
            </el-table-column>
            <el-table-column align="center" prop="frpz" label="日配注">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="bbzbrqm" label="大修井">
            <el-table-column align="center" prop="djs" label="井数">
            </el-table-column>
            <el-table-column align="center" prop="drpz" label="日配注">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="bbzbrqm" label="其他水井作业">
            <el-table-column align="center" prop="qjs" label="井数">
            </el-table-column>
            <el-table-column align="center" prop="qrpz" label="日配注">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="tbrq" label="已出方案未实施">
          <el-table-column align="center" prop="yjs" label="井数">
          </el-table-column>
          <el-table-column align="center" prop="yrpz" label="日配注">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="aqscts" label="未出方案未实施">
          <el-table-column align="center" prop="wjs" label="井数">
          </el-table-column>
          <el-table-column align="center" prop="wrpz" label="日配注">
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text"
              >查看</el-button
            >
            <el-button @click="handleClick(scope.row, 'edit')" type="text"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--容器区界面-->
      <el-table
        :data="rongqiquData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
        v-show="rongqiquVisable"
      >
        <el-table-column type="index" align="center" prop="axh" label="序号">
        </el-table-column>
        <el-table-column prop="axd" align="center" label="小队">
        </el-table-column>
        <el-table-column align="center" prop="ajh" label="井号">
        </el-table-column>
        <el-table-column align="center" prop="asgrq" label="施工日期">
        </el-table-column>
        <el-table-column align="center" prop="arpz" label="日配注">
        </el-table-column>
        <el-table-column align="center" prop="acslx" label="措施类型">
        </el-table-column>
        <el-table-column align="center" prop="amqjd" label="目前进度">
        </el-table-column>
        <el-table-column align="center" prop="abz" label="备注">
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text"
              >查看</el-button
            >
            <el-button @click="handleClick(scope.row, 'edit')" type="text"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--加热炉区界面-->
      <el-table
        :data="jiareluquData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
        v-show="jiareluquVisable"
      >
        <el-table-column type="index" align="center" prop="bxh" label="序号">
        </el-table-column>
        <el-table-column prop="bxd" align="center" label="小队">
        </el-table-column>
        <el-table-column align="center" prop="bjh" label="井号">
        </el-table-column>
        <el-table-column align="center" prop="bcfarq" label="出方案日期">
        </el-table-column>
        <el-table-column align="center" prop="bcsyy" label="措施原因">
        </el-table-column>
        <el-table-column align="center" prop="bbz" label="备注">
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text"
              >查看</el-button
            >
            <el-button @click="handleClick(scope.row, 'edit')" type="text"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--机泵区界面-->
      <el-table
        :data="jibengquData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
        v-show="jibengquVisable"
      >
        <el-table-column type="index" align="center" prop="cxh" label="序号">
        </el-table-column>
        <el-table-column prop="cxd" align="center" label="小队">
        </el-table-column>
        <el-table-column align="center" prop="cjh" label="井号">
        </el-table-column>
        <el-table-column align="center" prop="ccsyy" label="措施原因">
        </el-table-column>
        <el-table-column align="center" prop="cbz" label="备注">
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text"
              >查看</el-button
            >
            <el-button @click="handleClick(scope.row, 'edit')" type="text"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>

    <!-- 总览弹出框 -->
    <el-dialog :title="myDialogTitle" :visible.sync="zonglanFormVisible">
      <el-form :inline="true" :model="zonglanForm" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input
                v-model="zonglanForm.id"
                placeholder="单位"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">重配井相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井数:">
              <el-input
                v-model="zonglanForm.bbzbrqm"
                placeholder="请输入井数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日配注:">
              <el-input
                v-model="zonglanForm.bbzbrqm"
                placeholder="请输入日配注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">分层、细分井相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井数:">
              <el-input
                v-model="zonglanForm.bbzbrqm"
                placeholder="请输入井数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日配注:">
              <el-input
                v-model="zonglanForm.bbzbrqm"
                placeholder="请输入日配注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">大修井相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井数:">
              <el-input
                v-model="zonglanForm.bbzbrqm"
                placeholder="请输入井数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日配注:">
              <el-input
                v-model="zonglanForm.bbzbrqm"
                placeholder="请输入日配注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">其他水井相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井数:">
              <el-input
                v-model="zonglanForm.bbzbrqm"
                placeholder="请输入井数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日配注:">
              <el-input
                v-model="zonglanForm.bbzbrqm"
                placeholder="请输入日配注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">已出方案未实施相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井数:">
              <el-input
                v-model="zonglanForm.bbzbrqm"
                placeholder="请输入井数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日配注:">
              <el-input
                v-model="zonglanForm.bbzbrqm"
                placeholder="请输入日配注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">未出方案未实施相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井数:">
              <el-input
                v-model="zonglanForm.bbzbrqm"
                placeholder="请输入井数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日配注:">
              <el-input
                v-model="zonglanForm.bbzbrqm"
                placeholder="请输入日配注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="zonglanFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="zonglanFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!--容器区弹出框-->
    <el-dialog :title="myDialogTitle" :visible.sync="rongqiquFormVisible">
      <el-form :inline="true" :model="rongqiquForm" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小队:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input
                v-model="rongqiquForm.fid"
                placeholder="小队"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工日期:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input
                v-model="rongqiquForm.fid"
                placeholder="施工日期"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井号:">
              <el-input
                v-model="rongqiquForm.ojywyshl"
                placeholder="请输入井号:"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日配注：">
              <el-input
                v-model="rongqiquForm.ojywys8"
                placeholder="请输入日配注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="措施类型：">
              <el-input
                v-model="rongqiquForm.ojywys10"
                placeholder="请选择措施类型"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目前进度：">
              <el-input
                v-model="rongqiquForm.ojywys12"
                placeholder="请选择目前进度"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注：">
              <el-input
                v-model="rongqiquForm.ojywys14"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="rongqiquFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="rongqiquFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!--加热炉区弹出框-->
    <el-dialog :title="myDialogTitle" :visible.sync="jiareluquFormVisible">
      <el-form :inline="true" :model="jiareluquForm" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小队:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input
                v-model="rongqiquForm.fid"
                placeholder="小队"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工日期:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input
                v-model="rongqiquForm.fid"
                placeholder="施工日期"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井号:">
              <el-input
                v-model="rongqiquForm.ojywyshl"
                placeholder="请输入井号:"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="措施原因：">
              <el-input
                v-model="rongqiquForm.ojywys8"
                placeholder="请输入措施原因"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注：">
              <el-input
                v-model="rongqiquForm.ojywys10"
                placeholder="请输入备注："
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="jibengquFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="jibengquFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!--未出方案未实施弹出框-->
    <el-dialog :title="myDialogTitle" :visible.sync="jiareluquFormVisible">
      <el-form :inline="true" :model="jiareluquForm" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小队:">
              <!-- 表号默认只能读，是系统自动分配的-->
              <el-input
                v-model="rongqiquForm.fid"
                placeholder="小队"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">相关信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井号:">
              <el-input
                v-model="rongqiquForm.ojywyshl"
                placeholder="请输入井号:"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="措施原因：">
              <el-input
                v-model="rongqiquForm.ojywys8"
                placeholder="请输入措施原因"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注：">
              <el-input
                v-model="rongqiquForm.ojywys10"
                placeholder="请输入备注："
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="jibengquFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="jibengquFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPageName: "总览",

      activeName: "first",

      //容器区数据
      rongqiquData: [
        {
          //父表号
          axh: 1,
          //容器区数据
          //1#四合一液位油室数据
          axd: "尚9",
          ajh: "尚102-92",
          asgrq: "2022.6.23",
          arpz: "20",
          acslx: "重配",
          amqjd: "施工等待",
          abz: "恒达作业队",
        },
      ],

      //加热炉区数据
      jiareluquData: [
        {
          bxh: 1,

          bxd: "树322",
          bjh: "树72-63",
          bcfarq: "2022.2.20",
          bcsyy: "测试遇阻",

          bbz: "重配",
        },
      ],

      //机泵区数据
      jibengquData: [
        {
          //父表号
          cxh: 1,
          //容器区数据
          //1#四合一液位油室数据
          cxd: "树322",
          cjh: "树68-斜67",
          ccsyy: "待措施",
          cbz: "磨封失败",
        },
      ],

      // table数据
      tableData: [
        {
          //总览数据
          dw: "一区",
          zjs: "1",
          zrpz: "20",
          qjs: "1",
          qrpz: "10",
          yjs: "5",
          yrpz: "73",
          //表号，唯一标识
          wjs: "2",
          wrpz: "45",
        },
      ],

      //table数据总条数
      tableTotal: 30,
      //当前页码
      currentPage: 1,
      // 分页数
      pageSize: 5,

      //总览表单填报的数据
      zonglanForm: {
        tbrq: "",
        aqscts: "",
        bbzbrqm: "",
        bbzbjy: "",
        ybzbrqm: "",
        ybzbjy: "",
        //表号，唯一标识
        id: 0,
      },
      //容器区表单填报数据
      rongqiquForm: {
        fid: 1,
        //1#四合一液位油室数据
        ojywyshl: "",
        ojywys8: "",
        ojywys10: "",
        ojywys12: "",
        ojywys14: "",
        ojywys16: "",
        ojywys18: "",
        ojywys20: "",
        ojywys22: "",
        ojywys0: "",
        ojywys2: "",
        ojywys4: "",
        ojywys6: "",
        ojywysrj: "",
        //1#四合一液位水室数据
        ojywshhl: "",
        ojywsh8: "",
        ojywsh10: "",
        ojywsh12: "",
        ojywsh14: ":",
        ojywsh16: "",
        ojywsh18: "",
        ojywsh20: "",
        ojywsh22: "",
        ojywsh0: "",
        ojywsh2: "",
        ojywsh4: "",
        ojywsh6: "",
        ojywshrj: "",
        //1#四合一温度油出口
        ojwdyckhl: "",
        ojwdyck8: "",
        ojwdyck10: "",
        ojwdyck12: "",
        ojwdyck14: ":",
        ojwdyck16: "",
        ojwdyck18: "",
        ojwdyck20: "",
        ojwdyck22: "",
        ojwdyck0: "",
        ojwdyck2: "",
        ojwdyck4: "",
        ojwdyck6: "",
        ojwdyckrj: "",
        //1#四合一温度水出口
        ojwdsckhl: "",
        ojwdsck8: "",
        ojwdsck10: "",
        ojwdsck12: "",
        ojwdsck14: ":",
        ojwdsck16: "",
        ojwdsck18: "",
        ojwdsck20: "",
        ojwdsck22: "",
        ojwdsck0: "",
        ojwdsck2: "",
        ojwdsck4: "",
        ojwdsck6: "",
        ojwdsckrj: "",
        //1#四合一温度加热段
        ojwdjrdhl: "",
        ojwdjrd8: "",
        ojwdjrd10: "",
        ojwdjrd12: "",
        ojwdjrd14: ":",
        ojwdjrd16: "",
        ojwdjrd18: "",
        ojwdjrd20: "",
        ojwdjrd22: "",
        ojwdjrd0: "",
        ojwdjrd2: "",
        ojwdjrd4: "",
        ojwdjrd6: "",
        ojwdjrdrj: "",
        //2#四合一液位油室数据
        tjywyshl: "",
        tjywys8: "",
        tjywys10: "",
        tjywys12: "",
        tjywys14: ":",
        tjywys16: "",
        tjywys18: "",
        tjywys20: "",
        tjywys22: "",
        tjywys0: "",
        tjywys2: "",
        tjywys4: "",
        tjywys6: "",
        tjywysrj: "",
        //2#四合一液位水室数据
        tjywshhl: "",
        tjywsh8: "",
        tjywsh10: "",
        tjywsh12: "",
        tjywsh14: ":",
        tjywsh16: "",
        tjywsh18: "",
        tjywsh20: "",
        tjywsh22: "",
        tjywsh0: "",
        tjywsh2: "",
        tjywsh4: "",
        tjywsh6: "",
        tjywshrj: "",
        //2#四合一温度油出口
        tjwdyckhl: "",
        tjwdyck8: "",
        tjwdyck10: "",
        tjwdyck12: "",
        tjwdyck14: ":",
        tjwdyck16: "",
        tjwdyck18: "",
        tjwdyck20: "",
        tjwdyck22: "",
        tjwdyck0: "",
        tjwdyck2: "",
        tjwdyck4: "",
        tjwdyck6: "",
        tjwdyckrj: "",
        //2#四合一温度水出口
        tjwdsckhl: "",
        tjwdsck8: "",
        tjwdsck10: "",
        tjwdsck12: "",
        tjwdsck14: ":",
        tjwdsck16: "",
        tjwdsck18: "",
        tjwdsck20: "",
        tjwdsck22: "",
        tjwdsck0: "",
        tjwdsck2: "",
        tjwdsck4: "",
        tjwdsck6: "",
        tjwdsckrj: "",
        //2#四合一温度加热段
        tjwdjrdhl: "",
        tjwdjrd8: "",
        tjwdjrd10: "",
        tjwdjrd12: "",
        tjwdjrd14: ":",
        tjwdjrd16: "",
        tjwdjrd18: "",
        tjwdjrd20: "",
        tjwdjrd22: "",
        tjwdjrd0: "",
        tjwdjrd2: "",
        tjwdjrd4: "",
        tjwdjrd6: "",
        tjwdjrdrj: "",
      },

      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },

      //总览编辑框是否显示
      zonglanFormVisible: false,

      //容器区编辑框是否显示
      rongqiquFormVisible: false,

      //加热炉区编辑框是否显示
      jiareluquFormVisible: false,

      //机泵区编辑框是否显示
      jibengquFormVisible: false,

      //弹出框是否是查看
      ischeck: false,

      //弹出框标题
      myDialogTitle: "",

      //总览的可见性
      zonglanVisable: true,

      //容器区的可见性
      rongqiquVisable: false,

      //加热炉区的可见性
      jiareluquVisable: false,

      //机泵区可见性
      jibengquVisable: false,
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleClick(row, handle) {
      if (this.currentPageName === "水井作业情况表") {
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.zonglanFormVisible = true;
        this.zonglanForm = row;
        if (handle === "check") {
          this.myDialogTitle = "水井作业情况表信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.myDialogTitle = "水井作业情况表信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.myDialogTitle = "水井作业情况表信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        //同时其他的Form设置为false
        this.rongqiquFormVisible = false;
        this.jiareluquFormVisible = false;
        this.jibengquFormVisible = false;
        this.qijiliangquFormVisible = false;
        this.jinchuzhancanshuFormVisible = false;
        this.jibengyunxingjiluFormVisible = false;
        this.zongheshujuFormVisible = false;
      } else if (this.currentPageName === "正在作业井") {
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.rongqiquFormVisible = true;
        this.rongqiquForm = row;
        if (handle === "check") {
          this.myDialogTitle = "正在作业井信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.myDialogTitle = "正在作业井信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.myDialogTitle = "正在作业井信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.zonglanFormVisible = false;
        this.jiareluquFormVisible = false;
        this.jibengquFormVisible = false;
        this.qijiliangquFormVisible = false;
        this.jinchuzhancanshuFormVisible = false;
        this.jibengyunxingjiluFormVisible = false;
        this.zongheshujuFormVisible = false;
      } else if (this.currentPageName === "已出方案未实施") {
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.jiareluquFormVisible = true;
        this.jiareluquForm = row;
        if (handle === "check") {
          this.myDialogTitle = "已出方案未实施信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.myDialogTitle = "已出方案未实施信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.myDialogTitle = "已出方案未实施信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.zonglanFormVisible = false;
        this.rongqiquFormVisible = false;
        this.jiareluquFormVisible = false;
        this.qijiliangquFormVisible = false;
        this.jinchuzhancanshuFormVisible = false;
        this.jibengyunxingjiluFormVisible = false;
        this.zongheshujuFormVisible = false;
      } else if (this.currentPageName === "未出方案未实施") {
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.jibengquFormVisible = true;
        this.jibengquForm = row;
        if (handle === "check") {
          this.myDialogTitle = "未出方案未实施信息查看";
          this.ischeck = true;
          this.$message({ message: "成功打开", type: "success" });
        } else if (handle === "edit") {
          this.myDialogTitle = "未出方案未实施信息编辑";
          this.ischeck = false;
          this.$message({ message: "编辑成功", type: "success" });
        } else if (handle === "add") {
          this.myDialogTitle = "未出方案未实施信息填报";
          this.ischeck = false;
          this.$message({ message: "添加成功", type: "success" });
        }
        this.zonglanFormVisible = false;
        this.rongqiquFormVisible = false;
        this.jiareluquFormVisible = false;
        this.qijiliangquFormVisible = false;
        this.jinchuzhancanshuFormVisible = false;
        this.jibengyunxingjiluFormVisible = false;
        this.zongheshujuFormVisible = false;
      }
    },
    uploadData() {
      console.log("批量导入成功");
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // 序号计算
    indexMethod(index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },

    //Tab标签区域切换按钮事件
    handleMenuClick(tab, event) {
      var content = event.target.innerText;
      if (content === "水井作业情况表") {
        this.currentPageName = "水井作业情况表";
        this.zonglanVisable = true;
        this.rongqiquVisable = false;
        this.jiareluquVisable = false;
        this.jibengquVisable = false;
        this.qijiliangquVisable = false;
        this.jinchuzhancanshuVisable = false;
        this.jibengyunxingjiluVisable = false;
        this.zongheshujuVisable = false;
      } else if (content === "正在作业井") {
        this.currentPageName = "正在作业井";
        this.zonglanVisable = false;
        this.rongqiquVisable = true;
        this.jiareluquVisable = false;
        this.jibengquVisable = false;
        this.qijiliangquVisable = false;
        this.jinchuzhancanshuVisable = false;
        this.jibengyunxingjiluVisable = false;
        this.zongheshujuVisable = false;
      } else if (content === "已出方案未实施") {
        this.currentPageName = "已出方案未实施";
        this.zonglanVisable = false;
        this.rongqiquVisable = false;
        this.jiareluquVisable = true;
        this.jibengquVisable = false;
        this.qijiliangquVisable = false;
        this.jinchuzhancanshuVisable = false;
        this.jibengyunxingjiluVisable = false;
        this.zongheshujuVisable = false;
      } else if (content === "未出方案未实施") {
        this.currentPageName = "未出方案未实施";
        this.zonglanVisable = false;
        this.rongqiquVisable = false;
        this.jiareluquVisable = false;
        this.jibengquVisable = true;
        this.qijiliangquVisable = false;
        this.jinchuzhancanshuVisable = false;
        this.jibengyunxingjiluVisable = false;
        this.zongheshujuVisable = false;
      }
      console.log(this.currentPageName);
    },
  },
};
</script>

<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: large;
  padding-left: 10px;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myButtons {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>
